<template>
	<view class="index">
		<template v-if="JSON.stringify(Api_BianJiQi_PeiZhi) != '{}'">
			<view class="HuiFu-ShenMe" v-if="JSON.stringify(TieZi_XiangQing) != '{}'">
				<text>回复给：</text>
				<view class="SanHang">
					{{
						TieZi_XiangQing.title?
						TieZi_XiangQing.title:
						$_GuoLv_HTML(TieZi_XiangQing.content)
					}}
				</view>
			</view>
			<view class="NeiRong-BianJi">
				<textarea
					placeholder="请输入内容..."
					placeholder-style="color:#C0C4CC;"
					maxlength="-1"
					:show-confirm-bar="false"
					v-model="Vmodel_PingLun_NeiRong"></textarea>
			</view>
			<view class="NeiRong-BianJi-CaoZuoAnNiu">
				<view
					@click="$_TiaoZhuan('_Z_GongYong/BiaoQing_LieBiao')"
					class="Zi">
					<text style="font-size: 22rpx;">😀</text>
				</view>
			</view>
			<scroll-view
				v-if="Api_BianJiQi_PeiZhi.editor.toolbar.hashtag.status"
				scroll-x="true"
				class="ChaRu-AnNiu">
				<view class="AnNiu" @click="$_TiaoZhuan('_Z_GongYong/HuaTi_LieBiao')">#话题</view>
				<text
					@click="DianJi_ChaRu_HuaTi(item)"
					v-for="item in QuanJu_HuaTi_TuiJian">{{item}}</text>
			</scroll-view>
			<scroll-view
				v-if="Api_BianJiQi_PeiZhi.editor.toolbar.mention"
				scroll-x="true"
				class="ChaRu-AnNiu">
				<view class="AnNiu" style="background: #409EFF;" @click="$_TiaoZhuan('_Z_GongYong/AiTe_LieBiao')">@艾特</view>
				<text
					@click="DianJi_ChaRu_YongHu(item.YongHuMing)"
					v-for="item in QuanJu_YongHu_TuiJian">
					{{item.NiCheng}}<text v-if="item.MiaoShu">[{{item.MiaoShu}}]</text>
				</text>
			</scroll-view>
			<view
				v-if="Api_BianJiQi_PeiZhi.editor.toolbar.image.status"
				class="FuJian-ShangChuan FuJian-ShangChuan-TuPian">
				<view class="_Zuo">上传图片</view>
				<view class="_You">
					<view
						v-if="BenDi_FuJian_TuPian_LieBiao && BenDi_FuJian_TuPian_LieBiao.length != Api_BianJiQi_PeiZhi.editor.toolbar.image.uploadNumber"
						class="XunHuan JiaHao"
						@click="DianJi_PaiShe">
						<text class="iconfont icon-xiangji"></text>
					</view>
					<view
						v-for="(item,index) in BenDi_FuJian_TuPian_LieBiao"
						class="XunHuan TuPianYuLan">
						<text class="iconfont icon-close-bold" @click="DianJi_ShanChu_FuJian('TuPian',index)"></text>
						<view @click="$_TiaoZhuan('_Z_GongYong/TuPian_YuLan?url=' + item.path)">
							<image :src="item.path" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view
				v-if="Api_BianJiQi_PeiZhi.editor.toolbar.audio.status"
				class="FuJian-ShangChuan FuJian-ShangChuan-LuYin">
				<view class="_Zuo">录音</view>
				<view class="_You">
					<view class="Box">
						<!-- 录制、停止 -->
						<view
							v-if="FuJian_YinPin_LieBiao && FuJian_YinPin_LieBiao.length != Api_BianJiQi_PeiZhi.editor.toolbar.audio.uploadNumber"
							class="XunHuan"
							@click="DianJi_LuYin_CaoZuo('LuZhi')">
							<view
								:style="LuYin.LuZhi_ZhuangTai=='录制'?'录制':'border: 1rpx solid #409EFF;'"
								class="XunHuan-Shang">
								<text
									:style="LuYin.LuZhi_ZhuangTai=='录制'?'录制':'color: #409EFF;'"
									:class="LuYin.LuZhi_ZhuangTai=='录制'?'iconfont icon-yuyin':'iconfont icon-lujing'"
								></text>
								<view
									:style="LuYin.LuZhi_ZhuangTai=='录制'?'录制':'color: #409EFF;'">
									{{LuYin.LuZhi_ZhuangTai}}
								</view>
							</view>
							<view
								:style="LuYin.LuZhi_ZhuangTai=='录制'?'录制':'color: #409EFF;'"
								class="XunHuan-Xia">
								{{
									LuYin.LuZhi_ZhuangTai_QiTa == '未录制' ?
									'最长'+Api_BianJiQi_PeiZhi.editor.toolbar.audio.maxTime+'秒':
									LuYin.LuZhi_ZhuangTai_QiTa+'秒'
								}}
							</view>
						</view>
						<view class="Box-You">
							<template v-for="(item,index) in FuJian_YinPin_LieBiao">
								<view class="BoFangQi">
									<YouRan-UI-YinPin
										Css="width:350rpx;"
										:Url="item"></YouRan-UI-YinPin>
								</view>
								<view
									@click="DianJi_ShanChu_FuJian('YinPin',item.index)"
									class="ShanChu">
									<text class="iconfont icon-shibai"></text>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
			
			<view style="display: flex;align-items: center;justify-content: center;padding: 25rpx 0;">
				<view
					class="YouRan-UI-AnNiu-1 Flex"
					style="width: 200rpx;background: #F56C6C;color: #FFF;margin: 0 25rpx 0 0;"
					@click="DianJi_HuiFu">回复</view>
			</view>
		</template>
		<template v-if="JSON.stringify(Api_BianJiQi_PeiZhi) == '{}'">
			<YouRan-UI-JiaZaiZhong LeiXing="QuanPing"></YouRan-UI-JiaZaiZhong>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TieZi_XiangQing:{},//--------------------------帖子详情
				Vmodel_PingLun_NeiRong:"",//-------------------评论内容
				Api_BianJiQi_PeiZhi:{},//----------------------请求编辑器配置
				QuanJu_HuaTi_TuiJian:[],//---------------------请求话题推荐列表
				QuanJu_YongHu_TuiJian:[],//--------------------请求用户推荐列表
				BenDi_FuJian_TuPian_LieBiao:[],//--------------附件图片列表
				FuJian_YinPin_LieBiao:[],//--------------------附件音频列表
				LuYin:{
					LuZhi_ZhuangTai:"录制",
					LuZhi_ZhuangTai_QiTa:"未录制"
				},
			}
		},
		onShow() {
			uni.getStorage({
				key: 'XuanZhong_BiaoQing',
				success: (res) => {
					this.Vmodel_PingLun_NeiRong += res.data;
					uni.removeStorage({ key: 'XuanZhong_BiaoQing' });
				}
			});
			uni.getStorage({
				key: 'XuanZhong_AiTe',
				success: (res) => {
					this.Vmodel_PingLun_NeiRong += ' @'+res.data+' ';
					uni.removeStorage({ key: 'XuanZhong_AiTe' });
				}
			});
			uni.getStorage({
				key: 'XuanZhong_HuaTi',
				success: (res) => {
					if(this.Api_BianJiQi_PeiZhi.editor.toolbar.hashtag.showMode == 1){
						this.Vmodel_PingLun_NeiRong += ' #'+res.data+' ';
						uni.removeStorage({ key: 'XuanZhong_HuaTi' });
					}else{
						this.Vmodel_PingLun_NeiRong += ' #'+res.data+'# ';
						uni.removeStorage({ key: 'XuanZhong_HuaTi' });
					}
					uni.removeStorage({ key: 'XuanZhong_HuaTi' });
				}
			});
		},
		onLoad(e) {
			this.Vmodel_PingLun_NeiRong = e.n;
			this.PID = e.pid;
			this.CID = e.cid;
			// 请求，编辑器，配置，API
			this.QingQiu_BianJiQi_PeiZhi();
		},
		methods: {
			// 点击，录音，操作
			DianJi_LuYin_CaoZuo(e){
				if(e == 'LuZhi'){
					if(this.LuYin.LuZhi_ZhuangTai == '录制'){
						uni.getRecorderManager().start();
						this.LuYin.LuZhi_ZhuangTai = "停止";
						this.LuYin.LuZhi_ZhuangTai_QiTa = 1;
						this.JiShiQi = setInterval(() => {
							this.LuYin.LuZhi_ZhuangTai_QiTa += 1;
							if(this.LuYin.LuZhi_ZhuangTai_QiTa == this.Api_BianJiQi_PeiZhi.editor.toolbar.audio.maxTime-1){
								this.LuYin.LuZhi_ZhuangTai_QiTa = '未录制'
								this.LuYin.LuZhi_ZhuangTai = '录制'
								clearInterval(this.JiShiQi)
								uni.getRecorderManager().stop();
								uni.getRecorderManager().onStop((res) => {
									this.FuJian_YinPin_LieBiao.push(res.tempFilePath)
								});
							}
						}, 1000);
					}else{
						this.LuYin.LuZhi_ZhuangTai = '录制'
						clearInterval(this.JiShiQi)
						this.LuYin.LuZhi_ZhuangTai_QiTa = "未录制";
						uni.getRecorderManager().stop();
						uni.getRecorderManager().onStop((res) => {
							this.FuJian_YinPin_LieBiao.push(res.tempFilePath)
						});
					}
				}
			},
			DianJi_PaiShe(){
				let Shu = this.Api_BianJiQi_PeiZhi.editor.toolbar.image.uploadNumber;
				uni.chooseImage({
					count:parseInt(Shu) ? parseInt(Shu) : 1,
					success: (res) => {
						this.BenDi_FuJian_TuPian_LieBiao = res.tempFiles;
					}
				})
			},
			DianJi_ShanChu_FuJian(LeiXing,index){
				if(LeiXing == 'TuPian'){
					this.BenDi_FuJian_TuPian_LieBiao.splice(index,1)
				}
				if(LeiXing == 'YinPin'){
					this.FuJian_YinPin_LieBiao.splice(index,1)
				}
			},
			DianJi_ChaRu_HuaTi(e){
				if(this.Api_BianJiQi_PeiZhi.editor.toolbar.hashtag.showMode == 1){
					this.Vmodel_PingLun_NeiRong += ' #'+e+' ';
				}else{
					this.Vmodel_PingLun_NeiRong += ' #'+e+'# ';
				}
			},
			DianJi_ChaRu_YongHu(e){
				this.Vmodel_PingLun_NeiRong += ' @'+e+' ';
			},
			// 请求，编辑器，配置
			QingQiu_BianJiQi_PeiZhi(){
				uni.request({
					url:this.$_URL() + "/api/v2/editor/post/config",
					method:'GET',
					header:this.$_Fresns_Header(),
					success: (res) => {
						this.Api_BianJiQi_PeiZhi = res.data.data;
						if(this.CID){
							// 请求，评论，详情
							this.QingQiu_PingLun_XiangQing();
						}else{
							// 请求，帖子，详情
							this.QingQiu_TieZi_XiangQing();
						}
						// 请求，全局，配置
						this.QingQiu_QuanJu_PeiZhi();
					}
				})
			},
			// 请求，全局，配置
			QingQiu_QuanJu_PeiZhi(){
				uni.request({
					url:this.$_PeiZhi_WenJian() + "QuanJu.json",
					method:'GET',
					success: (res) => {
						this.QuanJu_HuaTi_TuiJian = res.data.HuaTi_TuiJian;
						this.QuanJu_YongHu_TuiJian = res.data.YongHu_TuiJian;
					}
				})
			},
			// 请求，帖子，详情
			QingQiu_TieZi_XiangQing(){
				this.$_QingQiu(
					"GET","/api/v2/post/"+this.PID+"/detail",{},
					(res) => {
						this.TieZi_XiangQing = res.data.data.detail;
					}
				)
			},
			// 请求，评论，详情
			QingQiu_PingLun_XiangQing(){
				this.$_QingQiu(
					"GET","/api/v2/comment/"+this.CID+"/detail",{},
					(res) => {
						this.TieZi_XiangQing = res.data.data.detail;
					}
				)
			},
			DianJi_HuiFu(){
				if(this.FuJian_YinPin_LieBiao.length){
					if(!this.Vmodel_PingLun_NeiRong){
						this.Vmodel_PingLun_NeiRong = "...语音回复"
					}
				}
				uni.showLoading();
				this.$_QingQiu(
					"POST","/api/v2/editor/comment/quick-publish",
					{
						"commentPid":this.PID,
						"commentCid":this.CID,
						"content":this.Vmodel_PingLun_NeiRong
					},
					(res) => {
						if(res.data.code == 0){
							this.tableKey = res.data.data.fsid;
							if(this.BenDi_FuJian_TuPian_LieBiao.length){
								this.ShangChuan_TuPian()
							}else{
								this.ShangChuan_YinPin()
							}
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			ShangChuan_TuPian(){
				uni.showLoading({ title: "图片上传中" });
				let arr = this.BenDi_FuJian_TuPian_LieBiao;
				return new Promise((presolve, preject) => {
					let uploads = [];
					(arr).forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.uploadFile({
								url: this.$_URL() + "/api/v2/common/upload-file",
								filePath: item.path,
								name: "file",
								header: this.$_Fresns_Header(),
								formData:{
									"tableName":"comments",
									"tableColumn":"id",
									"type":"image",
									"uploadMode":"file",
									"tableKey":this.tableKey
								},
								success(res) {
									if(JSON.parse(res.data).code == 0){
										resolve()
									}else{
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						uni.hideLoading();
						presolve(res)
						this.ShangChuan_YinPin()
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					})
				})
			},
			ShangChuan_YinPin(){
				uni.showLoading({ title: "音频上传中" });
				let arr = this.FuJian_YinPin_LieBiao;
				return new Promise((presolve, preject) => {
					let uploads = [];
					(arr).forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.uploadFile({
								url: this.$_URL() + "/api/v2/common/upload-file",
								filePath: item,
								name: "file",
								header: this.$_Fresns_Header(),
								formData:{
									"tableName":"comments",
									"tableColumn":"id",
									"type":"audio",
									"uploadMode":"file",
									"tableKey":this.tableKey
								},
								success(res) {
									if(JSON.parse(res.data).code == 0){
										uni.hideLoading();
										resolve()
									}else{
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						presolve(res)
						uni.hideLoading();
						
						uni.setStorage({
							key: 'TongZhi_ShangYiYe',
							data: "true",
							success: (res) => {
								uni.navigateBack();
							}
						});
						clearInterval(this.JiShiQi);
						
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					})
				})
			},
		}
	}
</script>

<style lang="scss">
.index{
	view{
		font-size: 28rpx;
	}
	.HuiFu-ShenMe{
		margin: 25rpx 25rpx 0 25rpx;
		background: $BeiJingSe;
		padding: 15rpx 25rpx;
		display: flex;
		border-radius: 10rpx;
		text{
			flex-shrink: 0;
			color: $ShenLanSe;
		}
	}
	.HuiFu-ZhuTi{
		margin: 25rpx 25rpx 0 25rpx;
		textarea{
			display: block;
			width: 650rpx;
			height: 200rpx;
			border-radius: 10rpx;
			padding: 25rpx;
			font-size: 28rpx;
			background: $BeiJingSe;
		}
		.ChaRu{
			display: flex;
			align-items: center;
			text{
				background: $BeiJingSe;
				margin: 25rpx 25rpx 0 0;
				font-size: 22rpx;
				line-height: 22rpx;
				padding: 15rpx 25rpx;
				border-radius: 10rpx;
			}
		}
	}
	.NeiRong-BianJi{
		border: 1rpx solid $BianKuangSe;
		margin: 25rpx 25rpx 0 25rpx;
		textarea{
			font-size: 28rpx;
			width:calc(100% - 50rpx);
			height: 100rpx;
			display: block;
			padding: 20rpx 25rpx;
			line-height: 45rpx;
		}
	}
	.NeiRong-BianJi-CaoZuoAnNiu{
		border: 1rpx solid $BianKuangSe;
		margin: 0 25rpx 0 25rpx;
		display: flex;
		background: $BeiJingSe;
		border-top: 0;
		.Zi{
			border-right: 1rpx solid $BianKuangSe;
			line-height: 18rpx;
			padding: 15rpx 20rpx;
			text{
				display: block;
				font-size: 18rpx;
				line-height: 18rpx;
			}
		}
	}
	.ChaRu-AnNiu{
		width: 700rpx;
		background: $BeiJingSe;
		margin: 25rpx 25rpx 0 25rpx;
		border: 1rpx solid $BianKuangSe;
		white-space: nowrap;
		display: flex;
		align-items: center;
		padding: 10rpx 0 15rpx 0;
		view{
			display: inline;
			font-size: 22rpx;
			line-height: 22rpx;
		}
		.AnNiu{
			color: #FFF;
			background: $HongSe;
			border-radius: 100rpx;
			padding: 5rpx 15rpx;
			margin:0 25rpx;
		}
		text{
			font-size: 22rpx;
			line-height: 22rpx;
			padding: 0 25rpx 0 0;
			text{
				padding: 0 0 0 5rpx;
				font-size: 12rpx;
				line-height: 12rpx;
				color: $ZhanWeiSe;
			}
		}
	}
	.FuJian-ShangChuan{
		border: 1rpx solid $BianKuangSe;
		margin: 25rpx 25rpx 0 25rpx;
		display: flex;
		padding: 1rpx;
		._Zuo{
			flex-shrink: 0;
			font-size: 22rpx;
			padding: 0 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $BeiJingSe;
			border-right: 1rpx solid $BianKuangSe;
			color: $ZhanWeiSe;
		}
		._You{
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 25rpx 0;
		}
	}
	.FuJian-ShangChuan-TuPian{
		._You{
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 25rpx 0;
			.XunHuan{
				margin: 25rpx 0 0 25rpx;
				width: 110rpx;
				height: 110rpx;
				overflow: hidden;
				border: 1rpx solid $BianKuangSe;
			}
			.JiaHao{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					color: $ZhanWeiSe;
					font-size: 50rpx;
				}
			}
			.TuPianYuLan{
				position: relative;
				background: $BeiJingSe;
				view{
					background: $BeiJingSe;
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
					width: 110rpx;
					height: 110rpx;
					image{
						display: block;
						width: 100%;
					}
				}
				.icon-close-bold{
					position: absolute;
					z-index: 2;
					top: 0;
					right: 0;
					width: 30rpx;
					height: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F56C6C;
					color: #FFF;
					font-size: 18rpx;
				}
			}
		}
	}
	.FuJian-ShangChuan-LuYin{
		._You{
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 25rpx 0;
			.Box{
				display: flex;
				.XunHuan{
					.XunHuan-Shang{
						margin: 25rpx 0 0 25rpx;
						width: 120rpx;
						height: 90rpx;
						overflow: hidden;
						border: 1rpx solid $BianKuangSe;
						border-radius: 15rpx;
						display: flex;
						align-items:center;
						justify-content:center;
						flex-flow: column;
						text{
							font-size: 35rpx;
							line-height: 35rpx;
							color: $ZhanWeiSe;
							margin: 0 0 5rpx 0;
						}
						view{
							font-size: 16rpx;
							line-height: 16rpx;
							color: $ZhanWeiSe;
						}
					}
					.XunHuan-Xia{
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16rpx;
						line-height: 16rpx;
						color: $ZhanWeiSe;
						margin: 15rpx 0 0 25rpx;
						width: 120rpx;
					}
				}
				.Box-You{
					padding: 0 0 0 25rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.BoFangQi{
						margin-top: 25rpx;
					}
					.ShanChu{
						margin: 25rpx 0 0 10rpx;
						text{
							font-size: 60rpx;
							line-height: 60rpx;
							color: $ZhanWeiSe;
						}
					}
				}
			}
			
		}
	}
}
</style>
